<template>
	<sl-page title="我的账单">
		<!-- <view class="bill-top">
			<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" @change="change"/>
		</view> -->
		<z-paging ref="paging" :paging-style="{'margin-top':CustomBar +'px'}" v-model="billList" @query="loadPage">
			<List :listDatas="billList">
				<template v-slot="{ item }">
					<view class="bill">
						<view class="bill-left">
							<view class="iconfont icon-wodezhangdan-huiyuan iconfont-size-60"></view>
						</view>
						<view class="bill-right">
							<view class="flex flex-x-between">
								<view class="f-w">
									购买会员
								</view>
								<view class="f-w">
									-{{'987' | Money}}
								</view>
							</view>
							<view class="flex flex-x-between py-1 f-tip f-24">
								<view class="">
									交易时间
								</view>
								<view class="">
									{{item.createDate}}
								</view>
							</view>
							<view class="flex flex-x-between f-tip f-24">
								<view class="">
									交易单号
								</view>
								<view class="">
									{{item.orderSn}}
								</view>
							</view>
						</view>
					</view>
				</template>
			</List>
		</z-paging>
	</sl-page>
</template>

<script>
	import BillApi from '@/api/bill/bill.js';
	import List from '@/pages/components/list/list.vue';
	import Constants from '@/constants';
	//
	export default {
		//
		name: 'collection',
		//
		mixins: [Constants],
		//
		components: {
			List
		},
		//
		data() {
			return {
				//当前页面参数
				options: {},
				range: ['2021-02-1', '2021-3-28'],
				billList: [],
				// newProducts: ''
			};
		},
		//
		onLoad(options) {
			this.options = options;
		},
		//
		onShow() {
		},
		//
		methods: {
			//获取收藏
			loadPage: async function() {
				// try {
				// 	// let res = await await GoodsApi.products();
				// 	// console.log('【获取账单数据】:', res.obj);
				// 	this.$refs.paging.complete([{
				// 		name: '我的账单'
				// 	}, {
				// 		name: '我的账单'
				// 	}]);
				// } catch (error) {
				// 	console.error('【获取账单失败】:', error);
				// 	this.$refs.paging.complete(false);
				// }
				try {
					let res = await BillApi.query(this.query, this.param);
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					console.error('【获取账单失败】:', error);
					this.$refs.paging.complete(false);
				}
			},
			// maskClick(e) {
			// 	console.log('maskClick事件:', e);
			// },
			// change(e) {
			// 	console.log('change事件:', e);
			// }
		}
	};
</script>

<style lang="scss" scoped>
	// .bill-top{
	// 	margin-top: 24rpx;
	// }
	.bill {
		display: flex;
		font-size: $uni-font-size-base;
		// padding: $xj-standard-padding;
		// border-radius: $xj-standard-border-radius;

		.bill-left {
			flex-basis: 10%;
			flex-grow: 0;
		}

		.bill-right {
			flex-basis: 90%;
			flex-grow: 0;
			padding: 0rpx 24rpx;
		}
	}
</style>